<template>
  <a-card>
    <a-card-grid style="width:70%;text-align:center" :hoverable="false">
      <a-row :gutter="30" justify="center">
        <a-col :span="4">
          <div class="box">
            <p>
              <a-icon type="idcard" theme="twoTone" class="icon" two-tone-color="#519FE8"/>
            </p>
            <p><span>客户数量</span></p>
            <P><span class="numSize" v-format="'#,##0'">{{ UserNums }}</span></P>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="box">
            <p>
              <a-icon type="pay-circle" theme="filled" class="icon" style="color: #FF0080"/>
            </p>
            <p><span>申请报价</span></p>
            <P><span class="numSize" v-format="'#,##0'">{{ PriceNums }}</span></P>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="box">
            <p>
              <a-icon type="eye" theme="filled" class="icon" style="color: #BB3D00"/>
            </p>
            <p><span>申请样品</span></p>
            <P><span class="numSize" v-format="'#,##0'">{{ SampleNums }}</span></P>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="box">
            <p>
              <a-icon type="profile" theme="twoTone" class="icon" two-tone-color="#0066CC"/>
            </p>
            <p><span>订单数量</span></p>
            <P><span class="numSize" v-format="'#,##0'">{{ OrderCountNums }}</span></P>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="box">
            <p>
              <a-icon type="home" theme="twoTone" class="icon" two-tone-color="#52c41a"/>
            </p>
            <p><span>出库数量</span></p>
            <P><span class="numSize" v-format="'#,##0'">{{ OutNums }}</span></P>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="box">
            <p>
              <a-icon type="gift" theme="twoTone" class="icon" two-tone-color="#FFB900"/>
            </p>
            <p><span>申请返料</span></p>
            <P><span class="numSize" v-format="'#,##0'">{{ GiftCountNums }}</span></P>
          </div>
        </a-col>
      </a-row>
    </a-card-grid>
    <a-card-grid style="width:30%;text-align:center" :hoverable="false">
      <a-row :gutter="20" justify="center">
        <a-col span="12">
          <div class="box">
            <p>
              <a-icon type="trophy" theme="filled" class="icon" style="color:#FF0000"/>
            </p>
            <p><span>本月业绩排行</span></p>
            <P><span class="numSize">{{ PerformanceRanking }}</span></P>
          </div>
        </a-col>
        <a-col span="12">
          <div class="box">
            <p>
              <a-icon type="car" theme="twoTone" class="icon" two-tone-color="#CC99CC"/>
            </p>
            <p><span>本月发货数</span></p>
            <P><span class="numSize" v-format="'#,##0'">{{ DeliveryQuantity }}</span></P>
          </div>
        </a-col>
      </a-row>
    </a-card-grid>
    <a-card-grid style="width:70%;text-align: center;padding: 10px;" :hoverable="false">
      <a-table
        ref="table"
        :scroll="{y:158}"
        :rowKey="(row, index) => row + index"
        :columns="columns"
        :data-source="data"
        :bordered="false"
        :pagination="false"
        :loading="loading"
        size="small"
      >
        <span slot="OrderQuantity" slot-scope="OrderQuantity" v-format="'#,##0'">{{ OrderQuantity }}</span>
        <span slot="DeliveryQuantity" slot-scope="DeliveryQuantity" v-format="'#,##0'">{{ DeliveryQuantity }}</span>
        <span slot="UnDelivery" slot-scope="UnDelivery" v-format="'#,##0'">{{ UnDelivery }}</span>
        <span slot="ReturningQty" slot-scope="ReturningQty" v-format="'#,##0'">{{ ReturningQty }}</span>
        <span slot="ReturnedQty" slot-scope="ReturnedQty" v-format="'#,##0'">{{ ReturnedQty }}</span>
      </a-table>
    </a-card-grid>
    <a-card-grid style="width:30%;text-align:center" :hoverable="false">
      <a-row :gutter="20" justify="center">
        <a-col span="12">
          <div class="box">
            <p>
              <a-icon type="money-collect" theme="twoTone" class="icon" two-tone-color="#00BFFF"/>
            </p>
            <p><span>本月回款金额</span></p>
            <P><span class="numSize" v-format="'#,##0.00'">{{ CollectionOfThisMonth }}</span></P>
          </div>
        </a-col>
        <a-col span="12">
          <div class="box">
            <p>
              <a-icon type="money-collect" theme="twoTone" class="icon" two-tone-color="#FF8C00"/>
            </p>
            <p><span>本年累计回款</span></p>
            <P><span class="numSize" v-format="'#,##0.00'">{{ CollectionOfThisYear }}</span></P>
          </div>
        </a-col>
      </a-row>
    </a-card-grid>
    <a-card-grid style="width:100%;text-align: center;" :hoverable="false">
      <a-row>
        <a-col>
          <div id="main" style="width: 100%; height: 296px;"></div>
        </a-col>
      </a-row>
    </a-card-grid>
  </a-card>
</template>

<script>
import * as echarts from 'echarts'

const columns = [
  { title: '客户名称', dataIndex: 'cCusName' },
  { title: '订货数量', dataIndex: 'OrderQuantity', align: 'right', width: '16%', scopedSlots: { customRender: 'OrderQuantity' } },
  { title: '发货数量', dataIndex: 'DeliveryQuantity', align: 'right', width: '16%', scopedSlots: { customRender: 'DeliveryQuantity' } },
  { title: '待发数量', dataIndex: 'UnDelivery', align: 'right', width: '16%', scopedSlots: { customRender: 'UnDelivery' } },
  { title: '请返数量', dataIndex: 'ReturningQty', align: 'right', width: '16%', scopedSlots: { customRender: 'ReturningQty' } },
  { title: '实返数量', dataIndex: 'ReturnedQty', align: 'right', width: '16%', scopedSlots: { customRender: 'ReturnedQty' } }
]
export default {
  data () {
    return {
      data: null,
      myChart: null,
      columns,
      loading: false, // 加载状态
      UserNums: 0, // 客户数量
      SampleNums: 0, // 样品数量
      PriceNums: 0, // 报价数量
      OutNums: 0, // 出库数量
      OrderCountNums: 0, // 订单数量
      GiftCountNums: 0, // 返料申请数量
      DeliveryNoticeCountNums: 0, // 发货通知
      InvoicesCountNums: 0, // 发票申请
      PerformanceRanking: 0, // 销售业绩排行
      DeliveryQuantity: 0, // 本月发货出库数量
      CollectionOfThisMonth: 0, // 本月回款金额
      CollectionOfThisYear: 0, // 本年回款累计
      OrderData: [], // 订单数量
      DeliveryData: [], // 出库数量
      CollectionData: [] // 回款信息
    }
  },
  created () {
    this.getUserList()
    this.getSampleList()
    this.getPriceList()
    this.getOutList()
    this.getOrderCount()
    this.getGiftCount()
    this.getDeliveryNoticeCount()
    this.getInvoicesCount()
    this.getPerformanceRanking()
    this.getDeliveryQuantity()
    this.getCollectionOfThisMonth()
    this.getCollectionOfThisYear()
    this.getHomeTableData()
  },
  mounted () {
    this.$nextTick(() => {
      const chartDom = document.getElementById('main')
      this.myChart = echarts.init(chartDom)
      this.myChart.setOption(this.setEcharts([], [], []))
      this.getEchartsData()
    })
  },
  methods: {
    // 获取客户信息
    getUserList () {
      this.$http.post('/Base_Manage/Introduce/GetCustomerCount').then(resJson => {
        if (resJson.Success) {
          this.UserNums = resJson.Data
        } else {
          this.$message.error(resJson.Msg)
        }
      })
    },
    // 获取样品信息
    getSampleList () {
      this.$http.post('/Base_Manage/Introduce/GetSampleCount').then(resJson => {
        if (resJson.Success) {
          this.SampleNums = resJson.Data
        } else {
          this.$message.error(resJson.Msg)
        }
      })
    },
    // 获取报价信息
    getPriceList () {
      this.$http.post('/Base_Manage/Introduce/GetQuotationCount').then(resJson => {
        if (resJson.Success) {
          this.PriceNums = resJson.Data
        } else {
          this.$message.error(resJson.Msg)
        }
      })
    },
    // 获取出库信息
    getOutList () {
      this.$http.post('/Base_Manage/Introduce/GetRdrecord32Count').then(resJson => {
        if (resJson.Success) {
          this.OutNums = resJson.Data
        } else {
          this.$message.error(resJson.Msg)
        }
      })
    },
    // 获取订单信息
    getOrderCount () {
      this.$http.post('/Base_Manage/Introduce/GetOrderCount').then(resJson => {
        if (resJson.Success) {
          this.OrderCountNums = resJson.Data
        } else {
          this.$message.error(resJson.Msg)
        }
      })
    },
    // 获取返料信息
    getGiftCount () {
      this.$http.post('/Base_Manage/Introduce/GetGiftCount').then(resJson => {
        if (resJson.Success) {
          this.GiftCountNums = resJson.Data
        } else {
          this.$message.error(resJson.Msg)
        }
      })
    },
    // 获取发货通知信息
    getDeliveryNoticeCount () {
      this.$http.post('/Base_Manage/Introduce/GetDeliveryNoticeCount').then(resJson => {
        this.DeliveryNoticeCountNums = resJson.Data
      })
    },
    // 获取发票申请信息
    getInvoicesCount () {
      this.$http.post('/Base_Manage/Introduce/GetInvoicesCount').then(resJson => {
        this.InvoicesCountNums = resJson.Data
      })
    },
    // 获取销售业绩排行
    getPerformanceRanking () {
      this.$http.post('/Base_Manage/Introduce/GetPerformanceRanking').then(resJson => {
        this.PerformanceRanking = resJson.Data
      })
    },
    // 获取本月发货出库数量
    getDeliveryQuantity () {
      this.$http.post('/Base_Manage/Introduce/GetDeliveryQuantity').then(resJson => {
        this.DeliveryQuantity = resJson.Data
      })
    },
    // 获取本月回款金额
    getCollectionOfThisMonth () {
      this.$http.post('/Base_Manage/Introduce/GetCollectionOfThisMonth').then(resJson => {
        this.CollectionOfThisMonth = resJson.Data
      })
    },
    // 获取本年回款累计金额
    getCollectionOfThisYear () {
      this.$http.post('/Base_Manage/Introduce/GetCollectionOfThisYear').then(resJson => {
        this.CollectionOfThisYear = resJson.Data
      })
    },
    // 获取数据页表格数据
    getHomeTableData () {
      this.loading = true
      this.$http.post('/Base_Manage/Introduce/GetHomeTableData').then(resJson => {
        this.data = resJson.Data
        this.loading = false
      })
    },
    // 获取近12个月月份信息
    getMonthData () {
      const nowDate = new Date()
      const array = []
      let year = nowDate.getFullYear()
      let mon = nowDate.getMonth() + 2
      for (let i = 0; i < 12; i++) {
        mon = mon - 1
        if (mon <= 0) {
          year = year - 1
          mon = mon + 12
        }
        if (mon < 10) {
          mon = '0' + mon
        }
        array[i] = year + '-' + mon
      }
      array.reverse()
      return array
    },
    // 获取Echarts数据
    async getEchartsData () {
      this.myChart.showLoading()
      await this.$http.post('/Base_Manage/Introduce/GetOrderQuantityData').then(resJson => {
        this.OrderData = resJson.Data
      })
      await this.$http.post('/Base_Manage/Introduce/GetDeliveryQuantityData').then(resJson => {
        this.DeliveryData = resJson.Data
      })
      await this.$http.post('/Base_Manage/Introduce/GetCollectionData').then(resJson => {
        this.CollectionData = resJson.Data
        console.log(this.CollectionData)
      })
      this.myChart.hideLoading()
      this.myChart.setOption(this.setEcharts(this.OrderData, this.DeliveryData, this.CollectionData))
    },
    // 设置Echarts
    setEcharts (OrderData = [], DeliveryData = [], CollectionData = []) {
      return {
        title: {
          text: '近12个月内数据统计图',
          subtext: '(最后月份发货金额与实际会存在出入)'
        },
        tooltip: {},
        legend: {
          data: ['订单金额', '发货金额', '回款金额']
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: 'category',
          data: this.getMonthData()
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '订单金额',
            yAxisIndex: 0,
            data: OrderData,
            type: 'bar',
            showBackground: true,
            color: '#629218',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },
          {
            name: '发货金额',
            yAxisIndex: 0,
            data: DeliveryData,
            type: 'bar',
            showBackground: true,
            color: '#1890ff',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },
          {
            name: '回款金额',
            yAxisIndex: 0,
            data: CollectionData,
            type: 'bar',
            showBackground: true,
            color: '#FF5809',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  }
}
</script>
<style scoped>
.box {
  background-color: #FCFCFC;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #FCFCFC;
  padding: 10px;
  margin: 0 auto;
  box-shadow: rgba(125, 125, 125, 0.3) 10px 10px 5px 5px;
}

.icon {
  margin-top: 15px;
  font-size: 40px;
}

.numSize {
  font-size: 20px;
}

</style>
